<template >
    <div>
        <!-- 电商后台管理系统 主页面-->
        <el-container>
            <!-- 头部 -->
            <el-header>
                <div class="top-left">
                    <span> <img src="../assets/heima.b5a855ee.png" alt=""> </span>
                    <span>电商后台管理系统</span>
                </div>
                <div class="top-right">
                    <el-button type="info" @click="tologin">退出</el-button>
                </div>
            </el-header>
            <el-container>
                <!-- 侧边 -->
                <el-aside :width="isCollapse?'65px':'250px'">
                    <!-- Aside -->
                    <el-col >
                        <p class="open" @click="isCollapse=!isCollapse">|||</p>
                        <el-menu default-active="2" router class="el-menu-vertical-demo" background-color="#333744"
                            text-color="#fff" active-text-color="#409eff" :unique-opened="true" :collapse="isCollapse"
                            :collapse-transition="false">
                            <!-- yi ji lu you -->
                            <el-submenu :index="item.path" v-for="(item, i) in goods" :key="i">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>{{ item.authName }}</span>
                                </template>
                                <!-- er ji lu you  -->
                                <el-menu-item-group v-for="(child, index) in item.children" :key="index">
                                    <el-menu-item :index="child.path">{{ child.authName }}</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>

                </el-aside>
                <!-- 中间内容 -->
                <el-main>
                      <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>
<script>
import { getleft } from "../api/api"
export default {
    data() {
        return {
            //存储数据
            goods: [],
            //那啥就是那个回收栏
            isCollapse: false
        }
    },
    methods: {
        //退出
        tologin() {
            this.$router.push("/")
        },
        //请求左侧数据

    },
    created() {
        getleft().then(res => {
            console.log(res);
            this.goods = res.data
        })
    },
}
</script>
<style lang="scss" scoped>
.el-header {
    background-color: #373d41;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px !important;

}

.top-left {
    display: flex;
    align-items: center;
    font-size: 18px;

    img {
        width: 58px;
        height: 58px;
        margin-right: 15px;

    }
}

.top-right {
    margin-right: 15px;
}


.el-aside {
    background-color: #333744;
    color: #fff;

  

}

.open {
    height: 30px;
    background-color: #4a5064;
    text-align: center;

}

.el-main {
    background-color: #E9EEF3;
    color: #333;
  
    height: calc(100vh - 60px);
}
.el-menu-item-group__title{
    padding: 0;
}
</style>